import React, { useEffect, useState, useContext } from 'react';

// 子组件
import Comp1 from './comp/Comp1.jsx'

// 上下文
import { ThemeContext } from '@/context/theme'

function Hooks (props) {
    // 声明一个新的叫做 “count” 的 state 变量
    const [count, setCount] = useState(0);
    const context = useContext(ThemeContext);

    /**
     * 副作用函数：（相当于 componentDidMount 和 componentDidUpdate）
     *  1、React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候
     *  2、如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它：
     *      1)  React 会在组件卸载的时候执行清除操作
     *      2)  副作用函数还可以通过返回一个函数来指定如何“清除”副作用：例如ChatAPI之发布订阅
     *  3、
    */
    useEffect(() => {
        console.log('------useEffect1-------')
        document.title = `You clicked ${count} times`;
        // ChatAPI.subscribe(props.friend.id, handle);
        // return () => {
        //     ChatAPI.unsubscribe(props.friend.id, handle);
        // };
    });

    useEffect(() => {
        console.log('------useEffect2-------')
    });

    return (
        <div>
            <p style={{
                color: context.color
            }}>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            <div>
                <Comp1 />
            </div>
        </div>
    );
}

export default Hooks